import React, {useState, useEffect} from 'react'

export default function Banner() {
    const [n, setN] = useState(0);
    const [img, setImg] = useState([
        require('../../assets/img/b1.jpeg'),
        require('../../assets/img/b2.jpeg'),
        require('../../assets/img/b3.jpeg')
    ])
    useEffect(() => {
        const timer = setInterval(() => {
            setN(v => {
                if (v == img.length - 1) {
                    return 0;
                };
                return v + 1;
            })
        }, 2000)
        return () => clearInterval(timer); // 销毁
    })
    const imgList = img.map((v, i) => <img key={i} src={v} style={{display: (i == n) ? 'block' : 'none'}}></img>)
    const liList = img.map((v, i) => <li key={i} className={i == n ? 'selected' : ''}></li>)
    return (
        <div className='banner'>
            <div className="banner-img">
                {imgList}
            </div>
            <ul>
                {liList}
            </ul>
        </div>
    )
}
